I am struggling with creation of the map legend adequate to my GeoJSON stylization.
The code looks like below:
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' +
feature.properties.Head
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: function (feature, layer) {
layer.bindPopup('color="red">'+feature.properties.Title+'
Address:
'+feature.properties.Head+'
'+feature.properties.Description+'
Website:'+feature.properties.URL+'
');
}
}).addTo(map);
2nd layer
var geojsonMarkerOptions2 = {
radius: 5,
fillColor: "#ffc34d",
color: "#1a1100",
weight: 1,
opacity: 1,
fillOpacity: 0.4
};
var church = L.geoJSON(test, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' +
feature.properties.Head
return L.circleMarker(latlng, geojsonMarkerOptions2);
},
onEachFeature: function (feature, layer) {
layer.bindPopup('color="red">'+feature.properties.Title+'
Address:
'+feature.properties.Head+'
'+feature.properties.Description+'
'+feature.properties.URL+'');
}
}).addTo(map);
And 3rd one with custom icon...
var myIcon = L.icon({
iconUrl: 'icon.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
L.geoJson(tesco, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: myIcon});
},
onEachFeature: function(feature, layer) {
layer.bindPopup(''+feature.properties.Title+'
Address: '+feature.properties.Head+'
'+feature.properties.Description+'
'+feature.properties.URL+'');
}
}).addTo(map);
There are ready GeoJSON layers implemented to the map.
Now the legend code
function getColor(d) {
return d === 'Company' ? "#de2d26" :
d === 'Church' ? "#377eb8" :
d === 'Shop' ? "#4daf4a" :
d === 'Other' ? "#984ea3" :
"#ff7f00";
}
function style(feature) {
return {
weight: 1.5,
opacity: 1,
fillOpacity: 1,
radius: 6,
fillColor: getColor(feature.properties.TypeOfIssue),
color: "grey"
};
}
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend');
labels = ['Categories'],
categories = ['Company','Church','Shop','Other'];
for (var i = 0; i < categories.length; i++) {
div.innerHTML +=
labels.push(
' ' +
(categories[i] ? categories[i] : '+'));
}
div.innerHTML = labels.join('
');
return div;
};
legend.addTo(map);
with CSS file...
.info
{
padding: 6px 8px;
font: 14px/16px Verdana, Geneva, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.legend {
line-height: 18px;
color: #555;
}
.legend i {
width: 15px;
height: 15px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
I tried to replace
fillColor: getColor(feature.properties.TypeOfIssue),
with
fillColor: getColor(feature.properties.geojsonMarkerOptions),
but no effect at all,
Is there some solution to make this legend compatible with the style of single GeoJSON layer provided? 
